<!-- 初值卡管理 -->
<template>
  <div class="stored_value_manager">
    <el-container class="base_details_container">
      <el-header>
        <BackTitleView title="储值卡管理" />
      </el-header>

      <el-main class="base_main_content">
        <div class="base_screen_header">
          <div class="btn-box">
            <el-button type="primary" @click="add">生成储值卡</el-button>
          </div>
        </div>
        <div class="base_main_margin_top">
          <StatusBar :data="statusList" default="all" />
        </div>
        <div class="base_main_header">
          <el-button type="primary" text @click="exportData">导出</el-button>
        </div>
        <DataCollectTable :data="data" :config="config" :total="total" />

        <el-dialog v-model="dialogVisible" title="生成储值卡" width="35%" top="20vh" class="base_dialog"
          @open="resetForm(formRef)">
          <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="单卡金额(元)" prop="cardMoney">
              <el-input-number v-model.number="form.cardMoney" :min="0" :precision="2" :controls="false"
                controls-position="right" />
            </el-form-item>
            <el-form-item label="生成数量" prop="num">
              <el-input v-model.number="form.num" type="number" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="submitForm(formRef)">生成</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </span>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import StatusBar from "@com/StatusBar.vue";
import { $msg, $box } from "@ui/msg";
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import $ from "@util/base";
import api from "@api/deposit";

const route = useRoute();

route.watchRouter("depositecard", () => {
  getData();
});

const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "未兑换",
    value: "1057001",
    total: 0,
  },
  {
    label: "已兑换",
    value: "1057002",
    total: 0,
  }
]);

const data = ref([]);
const total = ref(0);

const config = {
  showIndex: true,
  operations: null,
  column: [
    {
      label: "储值卡密",
      prop: "cardSecret",
      width: 130,
    },
    {
      label: "储值卡金额（元）",
      prop: "cardMoney",
    },
    {
      label: "状态",
      prop: "cardStatusName",
      width: 100,
    },
    {
      label: "兑换人",
      prop: "exchangeByName",
      width: 120,
    },
    {
      label: "兑换时间",
      prop: "exchangeTime",
    },
    {
      label: "生成人员",
      prop: "creatorName",
      width: 120,
    },
    {
      label: "生成时间",
      prop: "createTime",
      width: 180,
    },
  ],
};

const dialogVisible = ref(false);

const formRef = ref(null);

const form = reactive({
  cardMoney: null,
  num: null
});

function show() {
  dialogVisible.value = true;
}

function add() {
  show();
}

const rules = {
  cardMoney: [
    {
      required: true,
      message: "请输入单卡金额",
      trigger: "blur",
    },
  ],
  num: [
    {
      required: true,
      message: "请输入生成数量",
      trigger: "blur",
    }
  ]
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      userStoredValue(form);
    }
  });
};

function userStoredValue(data) {
  api.addRecharge(data, () => {
    $msg.succ("生成成功");
    dialogVisible.value = false;
    getData();
  });
}

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const status = ref(route.query().status || "");

getData();
function getData() {
  getList();
  getStatusNum();
}

function getList() {
  let routeQuery = route.query();
  api.rechargeList(
    {
      status: routeQuery.status,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      total.value = val.total;
      data.value = val.list;
    }
  );
}

function exportData() {
  let routeQuery = route.query();
  api.exportRecharge(
    {
      status: routeQuery.status,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      $.download(val.url, "储值卡列表导出")
    }
  );
}

function getStatusNum() {
  api.rechargeStatusNum((val) => {
    statusList.forEach((e, i) => {
      e.total = val[i];
    });
  }
  );
}

</script>

<style lang="scss">
.stored_value_manager {
  .btn-box {
    width: 340px;

    .el-button {
      &:first-child {
        margin-right: 10px;
      }
    }
  }

  .td_money_item {
    text-align: center;
    border: solid 1px $border;
    border-right: none;

    &:last-child {
      border-right: solid 1px $border;
    }

    .tdm_title {
      height: 50px;
      line-height: 50px;
      border-bottom: solid 1px $border;
      background-color: $background;
    }

    h2 {
      margin: 0;
      height: 80px;
      line-height: 80px;
    }
  }

  .td_money_item_sel {
    cursor: pointer;
  }

  .stored_order_tabs {
    // height: 100%;
    --el-tabs-header-height: 60px;
    border: none;

    .el-tabs__header {
      margin: 0;
    }

    .el-badge__content.is-fixed.is-dot {
      right: 0;
      top: 10px;
    }

    .el-tabs__content {
      // height: calc(100% - 60px);
      // overflow: hidden;
      margin: 0;
      padding: 0;
    }
  }

  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
}
</style>

